<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>04_元素类名操作</title>
		<!-- 元素类名操作   针对css中类名，可以添加、移除、切换和包含类名操作
			addClass()       有参【一个参，多参】
			                 功能：匹配元素集合中的所有元素添加一个类名或多个类名。
			                 语法：addClass("类名")
							 语法：addClass("类名1 类名2")
			removeClass()    有参【一个参，多参】
			                 功能：从匹配元素集合中的所有元素移除一个类名或多个类名。
			
			toggleClass()    功能：如果元素有指定类名则移除，没有则添加
		
		    hasClass()       功能：检查匹配元素集合中是否存在指定类名，返回值bool.
		
			
		 -->
		 <script src="../js/jquery-1.11.1.js"></script>
	 <style>
	   .bg {
	      width: 300px;
	      height: 300px;
	      background-color: lightblue; /* 背景色自拟 */
	    }
	
	   .bd {
	      border: 10px solid black; /* 10像素实现边框 */
	      border-radius: 50%; /* 倒角：画圆 */
	    }
	  </style>
	  
	</head>
	
	<body>
	  <h1>类名操作示例</h1>
	  <div id="targetElment"> </div>
	    <!-- 四个按钮 -->
	    <button id="addClassBtn">添加类名</button>
	    <button id="removeClassBtn">移除类名</button>
	    <button id="toggleClassBtn">切换类名</button>
	    <button id="hasClassBtn">判断是否有类名</button>
	 
	  <div id="resultArea"></div>
       <script>
		   //1.类名切换：  css存在可用类名
		   //点击  添加类名  实现效果300*300方块
		   $("#addClassBtn").click(function(){
			  $("#targetElment").addClass("bg bd");
			  $("#resultArea").html("<h4>已经切换了样式：.bg</h4>");
		   });
		   
		   //2.移除类名： 实现效果：点击  实现效果300*300方块
		   $("#removeClassBtn").click(function(){
		   	$("#targetElment").removeClass("bd bg");
		   	$("#resultArea").html("<h4>已经移除了样式：.bd</h4>");
		   });
		   
		   //3.切换类名： 实现效果：  点击切换，实现300*300有底色的圆且有边框
		  //4.样式全部移除，实现效果：实现300*300 背景色	
		   $("#toggleClassBtn").click(function(){
			   //存在bg 移除/   不存在就添加
		   	 $("#targetElment").toggleClass("bg");
		   	 $("#resultArea").html("<h4>已经切换了样式：存在样式移除，不存在就添加");
		   });
		   
		  //5.检查类名是否存在   
		  $("#hasClassBtn").click(function(){
		  	var hc=$("#targetElment").hasClass("bg");
		  	$("#resultArea").text("目标元素 bg 类名是否存在："+hc);
		  });
		   
	   </script>
	</body>
</html>